<template>
  <div class="default-box">
    <BetweenLayout>
      <template #left>
        <n-card title="store 声明">
          <n-code
            v-show="status == 1"
            :code="storeCode"
            language="javascript"
          />
          <n-code
            v-if="status == 2"
            :code="storeGettersCode"
            language="javascript"
          />
        </n-card>
        <n-card title="页面引入">
          <n-code :code="useCode" language="javascript" />
        </n-card>
        <n-card>
          <n-gradient-text
            :gradient="{
              from: 'rgb(236,69,103)',
              to: 'rgb(236,69,103)'
            }"
          >
            注意：
          </n-gradient-text>
          <n-gradient-text
            :gradient="{
              from: 'rgb(236,69,103)',
              to: 'rgb(236,69,103)'
            }"
          >
            pinia 底层是 vue3 reactive 如果直接解构 store ，会造成响应式丢失！
          </n-gradient-text>
          <n-code :code="storeTip" language="javascript" />
        </n-card>
      </template>
      <template #right>
        <n-button-group>
          <n-button ghost round type="info" size="large" @click="html">
            渲染
          </n-button>
          <n-button ghost type="info" size="large" @click="add">
            新增+
          </n-button>
          <n-button ghost type="info" size="large" @click="reduce">
            减少-
          </n-button>
          <n-button ghost type="info" size="large" @click="getters">
            使用 Getters
          </n-button>

          <n-button ghost round type="info" size="large" @click="reset">
            重置
            <n-icon>
              <ReloadOutline />
            </n-icon>
          </n-button>
        </n-button-group>
        <n-card class="mt-20 fs-22">
          <div>count: {{ count }}</div>
          <div v-if="status == 2">doubleCount: {{ doubleCount }}</div>
        </n-card>
        <Tip type="code" :text="codeNow" />
        <Tip v-show="!!tipNow" type="tip" :text="tipNow" />
      </template>
    </BetweenLayout>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { defaultStore } from '@/store/default.store'
import { loading } from '@/utils/loading'
import Tip from '@/components/Tip/index.vue'
import BetweenLayout from '@/components/BetweenLayout/index.vue'
import { runCode } from '@/utils/runCode'
import { runTip } from '@/utils/runTip'
import {
  NotificationsOutline,
  CodeSlashSharp,
  ReloadOutline
} from '@vicons/ionicons5'
import {
  storeCode,
  storeGettersCode,
  getGettersData,
  useCode,
  changeTip,
  getData,
  getDoubleCount,
  storeTip,
  resetCode,
  addCode,
  reduceCode
} from './code'

export default defineComponent({
  components: {
    NotificationsOutline,
    CodeSlashSharp,
    BetweenLayout,
    ReloadOutline,
    Tip
  },

  setup() {
    loading()
    // * 当前使用的code
    const { codeNow, setCode } = runCode(getData)

    // * 当前使用的提示
    const { tipNow, setTip } = runTip(getDoubleCount)

    // * store
    const store = defaultStore()
    // * 监听1
    const count = computed(() => store.count)
    // * 监听2
    const doubleCount = computed(() => store.doubleCount)
    // * 当前状态
    const status = ref(1)
    //  * 设置当前状态
    const setStatus = e => {
      status.value = parseInt(e)
    }

    // * 重置
    const reset = () => {
      setStatus(1)
      setCode(resetCode)
      setTip()
      store.$reset()
    }
    // * 新增
    const add = () => {
      setStatus(1)
      setCode(addCode)
      setTip(changeTip)
      store.count++
      // 写法2
      // store.$patch(state => {
      //   state.count++
      // })
    }
    // * 减少
    const reduce = () => {
      setStatus(1)
      setCode(reduceCode)
      setTip(changeTip)
      store.count--
    }
    // * 界面渲染
    const html = () => {
      setStatus(1)
      setCode(getData)
      setTip(getDoubleCount)
    }
    // * getters
    const getters = () => {
      setStatus(2)
      setCode(getGettersData)
    }

    return {
      store,
      count,
      doubleCount,
      status,
      storeCode,
      storeGettersCode,
      useCode,
      add,
      reduce,
      html,
      reset,
      codeNow,
      tipNow,
      storeTip,
      getters,
      NotificationsOutline
    }
  }
})
</script>

<style lang="scss" scoped>
.fs-22 {
  ::v-deep(*) {
    font-size: 22px;
  }
}
.default-box {
}
</style>
